<template>
	 <view class="index bgDefault" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
	  <tn-nav-bar :beforeBack="beforeBack">导师中心</tn-nav-bar>
	  <view class="template-about tn-safe-area-inset-bottom">
		<view class="about__wrap">

		  <view class="tn-flex tn-flex-row-between tn-flex-col-center ">
			<view class="justify-content-item">
			  <view class="tn-flex tn-flex-col-center tn-flex-row-left" @tap="turnUrl">
				<!-- 图标logo -->
				<view class="logo-pic tn-shadow" >
				  <view class="logo-image">
					<view class="tn-shadow-blur" :style="{ backgroundImage: 'url(' + userInfo.user.avatar + ');width: 82rpx;height: 82rpx;background-size: cover;' }" >
					</view>
				  </view>
				</view>
				<view class="tn-padding-right tn-color-white">
				  <view class="tn-padding-right tn-padding-left-sm nickname">
					{{userInfo.nickname}}
				  </view>
				  <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline">{{userInfo.intro}}</view>
				</view>
				
			  </view>
			</view>
		  </view>
		  
		  <!-- 更多信息-->
		  <view class=" tn-margin-top  tn-padding-bottom-sm tn-color-black ">
			  
			<view class="user_block ">
				<view class="block_header">
					<view class="block_title">
						<view class="title">我的服务</view>
						<view class="en_title">Actions</view>
					</view>
					<view class="block_right">>>></view>
				</view>
				<view class="block_content">
					<view @tap="turnUrl()" class="btn menu big" >
						<view class="btn_title">基本资料</view>
						<view class="btn_en_title">My Profile</view>
					</view>
					
					<view @tap="turnToOrder()" class="btn menu big" >
						<view class="btn_title">预约订单</view>
						<view class="btn_en_title">My Order</view>
					</view>
					
					<view @tap="turnToTopic()" class="btn menu big" >
						<view class="btn_title">设置主题</view>
						<view class="btn_en_title">Setting Topic</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		
		<view class="tn-padding-xl"></view>
		
		<!-- 回到首页悬浮按钮-->
		<!-- <nav-index-button></nav-index-button> -->
		
	  </view>
  </view>
</template>

<script>
  import {mentorCenter} from '@/api/user/index.js'
  import {checkLogin} from '@/util/common.js'
  
  
  export default {
    name: 'menor-index',
    //mixins: [template_page_mixin],
    data(){
      return {
		userInfo:[]
      }
    },
	onLoad() {
		this.initData()
	},
    methods: {
		beforeBack(){
			uni.redirectTo({
				url:"/pages/index/index?index=4"
			})
			return false;
		},
	  initData(){
		  mentorCenter().then(res=>{
			  this.userInfo = res
		  })
	  },
	  turnUrl(){
		uni.navigateTo({
		  url: '/pages/user/mentor/info?mentor_id='+this.userInfo.id
		}) 
	  },
	  turnToOrder(){
		uni.navigateTo({
		  url: '/pages/user/mentor/order?mentor_id='+this.userInfo.id
		})   
	  },
	  turnToTopic(){
		uni.navigateTo({
		  url: '/pages/user/mentor/topic'
		})   
	  },
	  
      // 跳转到
      navTuniaoHome(e) {
        wx.vibrateLong();
        uni.navigateTo({
          url: '/pages/index/index'
        })
      },
	  
	  
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .index {
    overflow: hidden;
    height: 100vh;
  }
  
  
  .bgDefault{
  	  background: $tn-main-bg;
  	 .template-about{
  		 padding: 0 7%;
  	 }
  }
  .template-about{
  }
  .iconColor{color: #01e0f2;}
  .tn-bg-common{background: linear-gradient(to bottom,#e5f5f5, #e0f0f9) }
  
  .tn-text-ellipsis{font-size: 12px;}
  .justify-content-item{font-size: 12px;color: #fff;}
  
  .user_block{
	  border-radius: 15rpx;background: #fff;
	  padding: 31rpx 22rpx;
	  margin-bottom:33rpx ;
	  .block_header{
		  display: flex;
		  justify-content: space-between;
		  color: $tn-main-orange;
		  
		  .block_title{
			  text-align: left;
			  font-weight: bold;
			  .title{
				  font-size: 36rpx;
			  }
			  
			  .en_title {
				font-size: 14rpx; 
			  }
		  }
	  }
	  
	  .block_content{
		  overflow: hidden;
		.menu{
			border-radius: 15rpx;
			padding: 21rpx 19rpx;
			font-size: 30rpx;
			margin-top: 16rpx;
			font-weight: bold;
			color: #666;
			border: 1px solid $tn-main-orange;
			text-align: left;
			width: 46%;
			display: inline-block;
			.btn_en_title{
				font-size: 14rpx;
			}
		} 
		.menu.big{width: 100%;}
	  }
  }
  
  /* 顶部背景图 start */
  .top-backgroup {
    height: 380rpx;
    z-index: -1;
  }
  /* 顶部背景图 end */
  
  /* 用户头像 start */
  .logo-image{
    width: 82rpx;
    height: 82rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	font-family: "微软雅黑";
  }
  
  .about {
    
    &__wrap {
      position: relative;
      z-index: 1;
      margin-top: 50rpx;
    }
  }
  /* 页面 end*/
  
	.idline{color: #666666;}
	.nickname{font-size: 24rpx;font-weight: bold;color: #333333;}
    
</style>
